<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Room Example</title>
</head>
<body>
    <div id="messages"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js"></script>
    <script>
        const tournamentId = 1; // 替换为实际的 tournamentId
        const socket = io('http://localhost:3000', {
            query: {
                tournamentId: tournamentId
            }
        });

        socket.on('connect', () => {
            console.log('Connected to WebSocket server');
            socket.emit('get_playing_matches', { tournamentId: tournamentId });
        });

        socket.on('update_playing_match', (matches) => {
            const messagesDiv = document.getElementById('messages');
            const newMessage = document.createElement('p');
            newMessage.textContent = JSON.stringify(matches);
            messagesDiv.appendChild(newMessage);
        });
    </script>
</body>
</html>